<template>
	<view class="box-nav-bar">
		<!-- :style="`height: ${start_top + 20}px;`" -->
		<view class="box-height"></view>
		<!-- :style="`padding-top:${menu_button_top}px;height:${menu_button_height}px;`" -->
		<view class="box-fixed">
			<!-- 外盒已经设置为了width:100vw，想要里面东西和外盒有距离，
			又不改变盒模型（上面通过pading改变盒高度，标准盒模型特有），
			只能新加一个元素，给他设置margin -->
			<view class="content">
				<view class="box-icon">
					<view class="box-icon-back">
						<uni-icons
							class="deep-color-white deep-size2"
							@click="hander_back"
							type="left"
						></uni-icons>
					</view>
					<view class="box-icon-home">
						<uni-icons
							class="deep-color-white deep-size2"
							@click="hander_home"
							type="home"
						></uni-icons>
					</view>
				</view>
				<view class="text">
					{{ title }}
				</view>
				<view class="space"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { inject, ref } from 'vue'

defineProps(['title'])

const menu_button_height = inject('menu_button_height')
const menu_button_top = inject('menu_button_top')
const start_top = inject('start_top')

const hander_back = function () {
	uni.navigateBack()
}
const hander_home = function () {
	uni.switchTab({
		url: '/pages/index/index'
	})
}
</script>

<style scoped lang="scss">
.box-nav-bar {
	width: 100vw;
	.box-height {
		height: 80rpx;
	}
	.box-fixed {
		width: 100vw;
		height: 80rpx;
		position: fixed;
		top: 0%;
		left: 0%;
		z-index: 999;

		background: linear-gradient(to bottom, transparent, #fff 100vh),
			linear-gradient(to right, #ff8c94, #ffd3b5);

		.content {
			// 在最外面设置的好处就是，自动对其图标
			font-size: 35rpx;
			height: 80rpx;
			margin: 0 $my-margin-rpx;
			@extend .f-c-c-n;
			justify-content: space-between;

			.text {
				color: white;
			}
			.box-icon {
				width: 130rpx;
				@extend .f-c-c-n;
				justify-content: space-between;
			}
			.space {
				width: 130rpx;
			}
		}
	}
}
</style>
